import React from 'react'; 
import {
  Form,
  Input,
  Button,
  DatePicker,
  Space,
  Cascader,
} from 'antd';
import ImageUpload from '@/pages/UpLoad/single_file_upload/index';
const validateMessages = {
  required: '${label} is required!',
  types: {
    email: '${label} is not validate email!',
    number: '${label} is not a validate number!',
  },
  number: {
    range: '${label} must be between ${min} and ${max}',
  },
};
const layout = {
  labelCol: {
    span: 8,
  },
  wrapperCol: {
    span: 16,
  },
}; 
//onFinsh之后的回调

const onFinish=()=>{
  console.log('onFinsh'); 
}

//设置性别

const menu1 = [
  {
    value: '男',
    label: '男',
  },
  {
    value: '女',
    label: '女',
  },
]; 
//设置婚姻状态

const menu2 = [
  {
    value: '已婚',
    label: '已婚',
  },
  {
    value: '未婚',
    label: '未婚',
  },
  {
    value: '保密',
    label: '保密',
  },
]; //设置地理位置

const options = [
  {
    value: 'zhejiang',
    label: 'Zhejiang',
    children: [
      {
        value: 'hangzhou',
        label: 'Hangzhou',
        children: [
          {
            value: 'xihu',
            label: 'West Lake',
          },
        ],
      },
    ],
  },
]; 
//点击回调

const onoptionsChange = () => {
  console.log(111);
};

const PersonalCenter = props => {
  return (
    <div className='styles.style'>  
      <Form {...layout} name="nest-messages" validateMessages={validateMessages} onFinish={onFinish}>
          <ImageUpload /> 
        <Form.Item
          name={['user', 'name']}
          label="真实姓名"
          rules={[
            {
              required: true,
            },
          ]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          name={[]}
          label="出生日期"
          rules={[
            {
              required: true,
            },
          ]}
        >
          <Space direction="vertical">
            {/* onChange={onChange} */}
            <DatePicker />
          </Space>
          ,
        </Form.Item>
        <Form.Item
          name={['user', 'sex']}
          label="性别"
          rules={[
            {
              required: true,
            },
          ]}
        >
          <Cascader options={menu1} placeholder="点击选择" />
        </Form.Item>
        <Form.Item
          name={['user', 'Phone']}
          label="手机号"
          rules={[
            {
              required: true,
            },
          ]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          name={['user', 'verification']}
          label="手机验证"
          rules={[
            {
              required: true,
            },
          ]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          name={['user', 'marriage']}
          label="婚姻状态"
          rules={[
            {
              required: true,
            },
          ]}
        >
          <Cascader options={menu2} placeholder="点击选择" />
        </Form.Item>
        <Form.Item
          name={['user', 'email']}
          label="联系邮箱"
          rules={[
            {
              type: 'email',
            },
            {
              required: true,
            },
          ]}
        >
          <Input />
        </Form.Item>
        <Form.Item name={['user', 'site']} label="现居住地址">
          <Cascader 
            options={options}
            onChange={onoptionsChange}
          />
        </Form.Item>
        <Form.Item
          name={['user', 'password1']}
          label="登陆密码"
          rules={[
            {
              type: 'number',
            },
            {
              required: true,
            },
          ]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          name={['user', 'password2']}
          label="确认密码"
          rules={[
            {
              type: 'number',
            },
            {
              required: true,
            },
          ]}
        >
          <Input />
        </Form.Item>
        <Form.Item name={['user', 'Signature']} label="个性签名">
          <Input.TextArea />
        </Form.Item>
        <Form.Item wrapperCol={{ ...layout.wrapperCol, offset: 8 }}>
          <Button type="primary" htmlType="submit">
           提交
          </Button>
        </Form.Item>
      </Form>
    </div>
  );
}; 
export default(state=>state)( PersonalCenter);